<template>
	<view style="padding: 30rpx;">
		<uni-forms class="form" ref="valiForm" :model="FormData" :rules="rules" labelWidth="160rpx">
			<uni-forms-item label="账号" name="accountName">
				<uni-easyinput :inputBorder="false" class="uni-input" type="text" placeholder="请输入手机号"
					v-model="FormData.accountName" />
			</uni-forms-item>
			<uni-forms-item label="验证码" name="captcha">
				<uni-row class="form-item">
					<uni-col :span="16">
						<uni-easyinput :inputBorder="false" class="uni-input" type="text" placeholder="请输入"
							v-model="FormData.captcha" />
					</uni-col>
					<uni-col :span="8">
						<view style="text-align: right;"><text class="form-link" v-if="isSend"
								@click="getCaptcha(FormData.accountName)">获取验证码</text><text v-else>{{time}}s</text>
						</view>
					</uni-col>
				</uni-row>
			</uni-forms-item>
			<uni-forms-item label="新密码" name="password">
				<input class="uni-input" password type="text" placeholder="请输入(6至20位数字或字母)"
					v-model="FormData.password" />
			</uni-forms-item>
			<uni-forms-item label="新密码" name="password2">
				<input class="uni-input" password type="text" placeholder="请再次输入新密码" v-model="FormData.password2" />
			</uni-forms-item>
			<button class="customer-btn" @click="submit(FormData)">保存</button>
		</uni-forms>
	</view>
</template>

<script>
	import {
		sendSmsCaptcha,
		resetPassword,
	} from "@/api/user.js"
	
	import {
		MD5
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				FormData: {},
				time: 0,
				timer: '',
				isSend: true,
				rules: {
					accountName: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '输入有误，请输入11位的手机号码',
							}
						]
					},
					captcha: {
						rules: [{
							required: true,
							errorMessage: '请输入手机获取的验证码',
						}]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入新密码',
							},
							{
								minLength: 6,
								maxLength: 20,
								errorMessage: '请设置最少6位以上，不超过20位的密码',
							},{
								validateFunction: function(rule, value, data, callback) {
									var regx = /^[A-Za-z0-9]+$/
									if (!regx.test(value)) {
										callback('密码只能输入数字和字母')
									}
									return true
								}
							}
						]
					},
					password2: {
						rules: [{
								required: true,
								errorMessage: '两次新密码输入不一致！',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value !== data.password) {
										callback('两次新密码输入不一致！')
									}
									return true
								}
							}
						]
					}
				}
			}
		},
		onReady() {
			this.$nextTick(()=>{
				this.$refs.valiForm.setRules(this.rules)
			})
		},
		onHide() {
			clearInterval(this.timer);
		},
		methods: {
			submit(form) {
				this.$refs.valiForm.validate().then(res => {
					console.log('表单数据信息：', res);
					/* let options = {
						accountName: '',
						captcha: '',
						password: MD5(form.newPassword)
					} */
					if (res.password) {
						res.password = MD5(res.password);
					}
					resetPassword(res).then((res) => {
						if (res.success) {
							uni.showToast({
								title: '密码修改成功！'
							});
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			getCaptcha(parmas) {
				if (parmas) {
					console.log("phone", parmas)
					sendSmsCaptcha(parmas).then((res) => {
						console.log("res", res)
			
						this.time = 60;
						this.isSend = false;
						this.timer = setInterval(() => {
							this.time = this.time - 1;
							if (this.time <= 0) {
								this.isSend = true;
							}
						}, 1000)
						uni.showToast({
							title: '验证码发送成功！'
						})
			
					}).catch((err) => {
			
					})
				} else {
					uni.showToast({
						title: '请输入手机号码！'
					})
					return
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.customer-btn {
		background-color: #00B5DD !important;
		color: #fff;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		border-radius: 8px;
		height: 44px;
		line-height: 44px;
		font-size: 32rpx;
		font-weight: 500;
	}

	.form-item {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.form-link {
		font-size: 28rpx;
		color: #00B5DD;
	}
</style>